[#escape x as (x)!?html]
<div class="position-fixed p-3" style="z-index: 5; right: 50%; top: 40%;">
  <div id="successToastDiv" class="toast bg-success text-white" role="alert" aria-live="assertive" aria-atomic="true" data-delay="3000">
    <div class="toast-body"><i class="far fa-check-circle"></i><span class="ml-2" id="successMsgDiv"></span></div>
  </div>
</div>

<div id="alertMsgContainer" class="position-fixed d-flex justify-content-center align-items-center" data-autohide="false"
     style="z-index:20000;background-color:rgba(0, 0, 0, 0.5);height:0;top:0;bottom:0;left:0;right:0;">
  <div id="alertMsgDiv" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="20000" data-autohide="false">
    <div class="toast-header p-3">
      <i class="fas fa-info-circle text-info lead mr-2"></i>
      <span id="alertMsgDiv" class="mr-auto">操作成功</span>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
  </div>
</div>

<script>
  $('#alertMsgDiv').on('hidden.bs.toast', function () {
    $('body').css('width', '');
    $('body').css('overflow', '');
    $('#alertMsgContainer').css('height', '0');
  });

  // 检查是否需要显示提示信息
  var MESSAGE_SUCCESS = 'jprocms_msg_success';
  var MESSAGE_ALERT = 'jprocms_msg_alert';

  function successShow(text) {
    $('#successMsgDiv').text(text);
    $('#successToastDiv').toast('show');
  }

  function alertShow(text) {
    var clientWidth = document.body.clientWidth || document.documentElement.clientWidth;
    var innerWidth = window.innerWidth;
    var scrollBarWidth = innerWidth - clientWidth;
    if (scrollBarWidth > 0) {
      $('body').css('width', 'calc(100% - ' + scrollBarWidth + 'px)');
    }
    $('body').css('overflow', 'hidden');
    $('#alertMsgContainer').css('height', '100%');
    $('#alertMsgDiv').text(text);
    $('#alertMsgDiv').toast('show');
  }

  (function () {
    var messageSuccess = Cookies.get(MESSAGE_SUCCESS);
    if (messageSuccess) {
      // 显示后清空标识
      Cookies.remove(MESSAGE_SUCCESS, {path: '/'});
      successShow(messageSuccess);
    }

    var messageAlert = Cookies.get(MESSAGE_ALERT);
    if (messageAlert) {
      // 显示后清空标识
      Cookies.remove(MESSAGE_ALERT, {path: '/'});
      alertShow(messageAlert);
    }
  })();

  // 设置“操作成功”标识
  function successTip(text) {
    if (!text) text = '操作成功';
    Cookies.set(MESSAGE_SUCCESS, text, {path: '/'});
  }

  function alertTip(text) {
    if (!text) text = '操作成功';
    Cookies.set(MESSAGE_ALERT, text, {path: '/'});
  }
</script>

<div class="modal fade" id="showErrorModel" tabindex="-1" style="z-index:20000;">
  <div class="modal-dialog">
    <div class="modal-content">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <div class="modal-body"></div>
    </div>
  </div>
</div>

<script>
  function showError(text) {
    $('#showErrorModel .modal-dialog').removeClass('modal-xl').css('max-width', '');
    $('#showErrorModel .modal-body').text(text);
    $('#showErrorModel').modal('show');
  }

  function showErrorPreJson(json) {
    $('#showErrorModel .modal-dialog').addClass('modal-xl').css('max-width', '100%');
    var modalBody = $('#showErrorModel .modal-body').empty();
    makeModalBody(modalBody, json);
    $('#showErrorModel').modal('show').css('padding-right', '');
  }

  function showErrorPre(data) {
    $('#showErrorModel .modal-dialog').addClass('modal-xl').css('max-width', '100%');
    var modalBody = $('#showErrorModel .modal-body').empty();
    var json = data.responseJSON || (data.responseText && JSON.parse(data.responseText));
    if (json) {
      makeModalBody(modalBody, json);
    } else {
      modalBody.append($('<pre>').text(JSON.stringify(data, null, 4)));
    }
    $('#showErrorModel').modal('show').css('padding-right', '');
  }

  function makeModalBody(modalBody, json) {
    modalBody.append($('<h1>').append($('<span>').text(json.status)).append($('<small>').text(' (' + json.error + ')')))
      .append($('<p>').text('path: ' + json.path))
      .append($('<p>').text('timestamp: ' + dayjs(json.timestamp).format('YYYY-MM-DDTHH:mm:ss.SSSZZ')))
      .append($('<p>').append($('<code>').text(json.message)));
    if (json.trace) modalBody.append($('<pre>').css({'white-space': 'pre-wrap', 'word-wrap': 'break-word'}).append($('<code>').text(json.trace)));
  }

  function handleError(data) {
    if (data.msg && !data.error) {
      showError(data.msg);
    } else {
      showErrorPreJson(data);
    }
  }

  var request = axios.create({timeout: 30000});
  request.interceptors.request.use(function (config) {
    return config;
  }, function (error) {
    return Promise.reject(error);
  });
  request.interceptors.response.use(function (response) {
    return response;
  }, function (e) {
    console.log(e);
    var data = e.response.data;
    var code = e.response.code;
    var statusText = e.response.statusText;
    if (data) {
      handleError(data);
      return Promise.reject(data.error);
    }
    handleError({code});
    return Promise.reject(statusText);
  });
</script>
[/#escape]
